<template>
  <van-nav-bar title="订单详情" left-arrow @click-left="$router.back()" />
  <div class="app">
    <div v-for="(item, index) in detaillist" :key="index">
      <div class="message">
        <van-skeleton :animate="false">
          <template #template>
            <div :style="{ display: 'flex', width: '100%' }">
              <van-image round width="48px" height="48px" :src="item.avater" />
              <div :style="{ flex: 1, marginLeft: '24px' }">
                <div class="paragraph">
                  <span>{{ item.name }}</span
                  ><span class="phone">{{ item.phone }}</span>
                </div>
                <div class="paragraph">
                  {{ item.address }}
                </div>
              </div>
            </div>
          </template>
        </van-skeleton>
      </div>
      <div class="detail">
        <span>订单信息</span>

        <van-divider :style="{ borderColor: '#D0D0D0' }" />
        <van-image
          class="orderpic"
          width="80px"
          height="80px"
          :src="item.orderpic"
        />
        <span>{{ item.ordername }}</span>
        <div class="" style="float: right">
          <span>¥{{ item.orderprice }}</span>
          <div class="num">x{{ item.ordernum }}</div>
          <div class="" style="clear: both"></div>
        </div>
      </div>
      <div class="content">
        <div class="first">
          <span>订单编号:</span>
          <span id="orderNumber">{{ item.orderid }}</span>

          <div @click="copyOrderNumber" style="float: right" class="copy">
            复制
          </div>
        </div>

        <div class="" style="clear: both">
          <span>订单备注：{{ item.orderremark }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { showToast } from "vant";
const detaillist = ref([
  {
    name: "wuhu",
    phone: "1840256743",
    address: "广东省深圳市南山区",
    orderid: "111000",
    avater: "https://ts1.cn.mm.bing.net/th?id=OIP-C.jdP04yEoxG10mcywseQj7gAAAA&w=181&h=181&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
    orderpic: require("@/assets/img/l-login.png"),
    ordername: "999任选三件套",
    orderprice: "100.00",
    ordernum: "12",
    orderremark: "备注",
  },
]);

const copyOrderNumber = () => {
  try {
    const orderNumberElement = document.getElementById("orderNumber");
    if (!orderNumberElement) {
      throw new Error("订单号元素未找到");
    }

    const orderNumber = orderNumberElement.innerText;
    const tempInput = document.createElement("input");
    tempInput.value = orderNumber;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);

    showToast({
      message: "复制成功",
    });
  } catch (e) {
    showToast({
      message: "复制失败",
    });
  }
};

onMounted(() => {

});
</script>

<style scoped lang="less">
#orderNumber {
  color: #999999;
}
.first {
  margin-bottom: 6px;

  width: 100%;
}
.content {
  margin-top: 16px;
  background-color: #fff;
  padding: 20px;
}
.app {
  background: #f2f2f2;
  height: 100vh;
}
.message {
  background-color: #fff;
  width: 100%;
  padding: 20px;
  height: 100px;
}
.van-image {
  opacity: 1; 
}
.phone {
  margin-left: 12.8px;
}
.paragraph {
  margin-bottom: 5px;
}
.detail {
  margin-top: 16px;
  background-color: #fff;
  padding: 20px;
  height: 280px;
  position: relative;
}
.orderpic {
  vertical-align: middle;
  margin-right: 12.8px;
}
.num {
  position: absolute;
  right: 20px;
  color: #aca9ad;
}
.copy {
  color: #000;
}
</style>
